<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #r2{
        }
    </style>
</head>
<body>
    <svg viewBox="0 0 100 100" width="400" height="400">
        <rect x="20" y="20" width="50" height="30" fill="#ccc" fill-opacity="0.8"/>
        <rect x="20" y="20" width="50" height="30" fill="none" stroke="#66f" stroke-dasharray="2.5"
             transform="translate(10,10)"/>
    </svg>

    <svg viewBox="-100 -100 200 200" width="400" height="400">
        <rect x="0" y="0" width="60" height="40" fill="#ccc" fill-opacity="0.8"/>
        <rect id="r2" x="0" y="0" width="60" height="40" fill="none" stroke="#66f" stroke-dasharray="2.5"
               transform="rotate(30)" />
    </svg>

    <svg viewBox="-100 -100 200 200" width="400" height="400">
        <rect x="0" y="0" width="60" height="40" fill="#ccc" fill-opacity="0.8"/>
        <rect id="r2" x="0" y="0" width="60" height="40" fill="none" stroke="#66f" stroke-dasharray="2.5"
               transform="scale(1.5)"/>
        <rect id="r2" x="0" y="0" width="60" height="40" fill="none" stroke="#f66" stroke-dasharray="2.5"
                transform="scale(.5)" transform-origin="30 20"/>
    </svg>

    <svg viewBox="-100 -100 200 200" width="400" height="400">
        <rect x="0" y="0" width="60" height="40" fill="#ccc" fill-opacity="0.8"/>
        <rect id="r2" x="0" y="0" width="60" height="40" fill="none" stroke="#66f" stroke-dasharray="2.5"
               transform="skewX(30)"></rect>
        <rect id="r2" x="0" y="0" width="60" height="40" fill="none" stroke="#f66" stroke-dasharray="2.5"
                transform="skewX(30) skewY(30)" transform-origin="30 20"></rect>
    </svg>

    
    
    <script src="index.js"></script>
</body>
</html>